<template>
	<view>
		<view class="context">
			<view class="cancel" @click="toIndex">
				<uni-icons type="closeempty" color="#161412" size="30"></uni-icons>
			</view>
			<text class="title">通过短信验证码登陆</text>
			<text class="remark">未注册手机号将自动注册后登陆</text>
			<view class="mobile">
				<input type="number" v-model="phone" @blur="blur" maxlength="11" placeholder="手机号"
				 @confirm="sendMessage"
				 confirm-type="send" />
				 <uni-icons type="clear" size="14" color="#808080" v-show="phone" @click="phone = ''"></uni-icons>
			</view>
			<button type="default" @click="sendMessage" :class="phone.length>=11? '' : 'disable'" :disabled="phone.length<11">发送验证码</button>
			<view class="password" @click="passwordLogin">
				<text>密码登陆</text>
			</view>
<!-- 			<view class="other">
				<text>其他登陆方式</text>
				<view class="list">
					<view class="item" @click="wechatLogin">
						<text class="iconfont icon-tubiaozhizuomoban"></text>
					</view>
					<view class="item">
						<text class="iconfont icon-QQ"></text>
					</view>
					<view class="item">
						<text class="iconfont icon-28"></text>
					</view>
				</view>
			</view>
 -->		</view>
	</view>
</template>

<script>
	import uniIcons from '../../components/uni-icons/uni-icons.vue'

	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				phone: ''
			}
		},
		methods: {
			wechatLogin(){
				uni.getProvider({
					service: 'oauth',
					success(res){
						console.log(res)
					}
				})
			},
			toIndex() {
				uni.switchTab({
					url: '../index/index',
					
				})
			},
			confirm(){
				this.blur()
			},
			sendMessage(){
				this.blur()
				if(!this.cannot){
					uni.navigateTo({
						url:'../vcode/vcode?phone=' + this.phone,
						animationType: 'slide-in-right'
					})
				}
			},
			blur(){
				var reg = new RegExp('^1[0-9]{10}$') 
				var res = reg.test(this.phone)
				if(!res) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					this.cannot = true
				} else {
					this.cannot = false
				}
			},
			passwordLogin(){
				uni.navigateTo({
					url:'../passwordLogin/passwordLogin',
					animationType: 'fade-in'
				})
			}
		},
		onLoad() {}
	}
</script>

<style lang="scss">
	.context {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
	.disable {
		color: $uni-text-color-disable;
		background-color: #92afbe;
	}
		.cancel {
			margin: 50rpx 20rpx 0;
		}

		.title {
			padding-left: 40rpx;
			padding-top: 50rpx;
			padding-bottom: 40rpx;
			font-size: 48rpx;
			font-weight: 600;
		}

		.remark {
			padding-left: 40rpx;
			font-size: $uni-font-size-sm;
			color: #404040;
			padding-bottom: 50rpx;
		}

		.mobile {
			margin: 40rpx 0;
			padding-right: 50rpx;
			margin-bottom: 0rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			input {
				margin: 0rpx 40rpx;
				padding: 10rpx 20rpx;
				font-size: 32rpx;
				width: 100%;
			}			
		}

		.password {
			text-align: center;
			font-size: $uni-font-size-sm;
		}

		
		button {
			height: 80rpx;
			margin:0 40rpx;
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			line-height: 80rpx;
			color: #FFFDEF;
			background-color: $color1;
			font-size: $uni-font-size-base;
		}

		.other {
			position: fixed;
			bottom: 0rpx;
			text-align: center;
			left: 0;
			width: 100%;
			color: #404040;
			font-size: $uni-font-size-base;
			padding-bottom: 30rpx;
			.list {
				display: flex;
				flex-direction: row;
				margin-top: 30rpx;
				padding: 20rpx 0;
				justify-content: center;
				.item{
					text-align: center;
					width: 80rpx;
					margin: 0 40rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					background-color: #e9e7eb;
					border-radius: 50%;
					.icon-tubiaozhizuomoban{
						color: #00b613;
						font-size: 45rpx;
					}
					.icon-QQ {
						color: #0066b3;
						font-size: 45rpx;
					}
					.icon-28 {
						color: #d61726;
						font-size: 45rpx;
					}
				}
			}
		}
	}

</style>
